<template>
  <div class="logistics">
    <n-form label-placement="left">
      <n-row :gutter="24">
        <n-col :span="6">
          <n-form-item label="收件人姓名">
            <n-input v-model:value="query.address_name" placeholder="收件人姓名"/>
          </n-form-item>
        </n-col>
        <n-col :span="6">
          <n-form-item label="收件人电话">
            <n-input v-model:value="query.mobile" placeholder="收件人电话"/>
          </n-form-item>
        </n-col>
        <n-col :span="6">
          <n-form-item label="收件人地址">
            <n-input v-model:value="query.address" placeholder="收件人地址"/>
          </n-form-item>
        </n-col>
        <n-col :span="6">
          <n-form-item>
            <n-space>
              <n-button type="info" @click="handleSearch">查询</n-button>
              <n-button @click="handleReset">重置</n-button>
            </n-space>
          </n-form-item>
        </n-col>
      </n-row>
    </n-form>
<!--    <br/>-->
    <n-data-table
        :columns="columns"
        max-height="750px"
        size="small"
        :data="data"
        :pagination="false"
    ></n-data-table>

    <Modal
        :show="modalProps.show"
        :cancel="modalProps.cancel"
        :title="modalProps.title"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <n-input type="textarea" placeholder="请输入物流描述" v-model:value="formData.logistics_result"></n-input>
    </Modal>
  </div>
</template>

<script lang="ts">
export default {
  name: "logistics"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref, h} from "vue"
import {sms_logistics_query, sms_logistics_update} from '@/api/sms'
import {logisticsColumns, logisticsListType, logisticsQueryType} from '@/view/order/logistics/logisticsType'
import {NButton} from 'naive-ui'
import useMsg from '@/hooks/useMsg'
import Modal from '@/components/Modal.vue'
const {success, error} = useMsg()

const query = reactive<logisticsQueryType>({
  mobile: "",
  address_name: "",
  address: ""
})

const modalProps = reactive<{
  show: boolean
  cancel: boolean
  title: string
}>({
  show: false,
  cancel: false,
  title: "物流更新",
})

const formData = reactive<Partial<logisticsListType>>({
  logistics_result: ""
})

const data = ref<logisticsListType[]>([])

const columns = logisticsColumns((r:logisticsListType) => {
  if (r.logistics_status !== "12" && r.logistics_status !== "13") {
    return h(NButton, {
      type: 'info',
      onClick: () => {
        let key: keyof logisticsListType
        for (key in r) {
          formData[key] = r[key]
        }
        formData.logistics_result = ""
        modalProps.show = true
      }
    }, "物流更新")
  }
  return ""
})

function getList () {
  data.value = []
  sms_logistics_query(query).then(res => {
    if (res.code === 200) {
      data.value = res.data
    }
  })
}

const handleSearch = () => {
  getList()
}

const handleReset = () => {
  let key: keyof logisticsQueryType
  for (key in query) {
    query[key] = ""
  }
  getList()
}

const handleOk = () => {
  sms_logistics_update(<logisticsListType>formData).then( res => {
    if (res.code === 200) {
      success(res.message)
      getList()
      modalProps.show = false
    }else {
      error(res.message)
    }
  }, err => {
    error(err)
  })
}

const handleCancel = () => {
  modalProps.show = false
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
